<template>
  <div class="stone-sland">
    <div class="stone-box" @click="$router.push('/screen')">
      <img class="right-img" src="@/assets/stonelsland/img1.png" alt="#">
      <span class="left-span">冬季预览系列_2021-22</span>
    </div>
    <div class="stone-box">
      <img class="left-img" src="@/assets/stonelsland/img2.png" alt="#">
      <span class="right-span">冬季预览系列_2021-22</span>
    </div>
    <div class="stone-box">
      <img class="right-img" src="@/assets/stonelsland/img3.png" alt="#">
      <span class="left-span">冬季预览系列_2021-22</span>
    </div>
    <div class="stone-box">
      <img class="left-img" src="@/assets/stonelsland/img4.png" alt="#">
      <span class="right-span">冬季预览系列_2021-22</span>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.stone-sland {
  position: relative;
  height: 100%;
  overflow: scroll;
  .stone-box {
    position: relative;
    height: 250px;
    padding: 20px;
  }
  img {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .left-img {
    left: 0;
  }
  .right-img {
    right: 0;
  }
  span {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    padding: 0 4px;
    border: 1px solid #333;
    letter-spacing: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .left-span {
    left: 20px;
  }
  .right-span {
    right: 20px;
  }
}
.stone-sland::before {
  content: '';
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  background: #999;
  z-index: -1;
}
</style>